<template>
  <div>
    <Card>
      <div class="p-relative">
        <div @click="refresh" class="p-absolute refresh-btn">
          <Icon size='24' type="md-refresh" />
        </div>
        <div class="flex-box search-area">
          <div class="flex-item search-btn">
            <Button type="warning" @click='excel'>导出</Button>
          </div>
          <div class="flex-item search-btn">
            <Button type="warning" @click='search'>搜索</Button>
          </div>
           <div class="flex-item ">
                 <Input v-model="searchObj.name" placeholder="请输入用户昵称、手机号" ></Input>
            </div>
           <div class="flex-item " >
                 <Date-picker type="daterange" v-model="searchObj.search_time"  @on-change="seachTimeChange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></Date-picker>
            </div>



        </div>
      </div>
      <Table :columns="tableOption" :data="data.list" border :no-data-text="loadingText ? loadingText : '暂无数据'" border
        ref="tables" editable search-place="top">

        <template slot-scope="{ row, index }" slot="action">
          <div class="flex-box flex-center flex-margin">

            <Button type='warning' @click="edit(row, index)" size='small'>编辑</Button>
            <Button type='error' @click="del(row, index)" size='small'>删除</Button>

          </div>
        </template>
      </Table>
      <!-- <Page class="foot-page" :current='page.current' :total="page.total" :page-size="page.pageSize" show-total
        show-elevator @on-change="changepage"></Page>
 -->
    </Card>





    <!-- 删除弹窗 -->
    <Modal v-model="delModal" title="提示" width="250">
      <p class="font16">
        <Icon class='del-tips-icon' type="ios-alert-outline" color='orange' size='22' />确定删除该数据吗？
      </p>
      <div slot="footer">
        <Button @click='delModal=false'>取消</Button>
        <Button type="primary" @click='confirmDel'>确定</Button>
      </div>
    </Modal>


  </div>
</template>
<!-- 公共弹框，成功，失败，报错，loading -->
<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  import {
    permission
  } from '@/config/permission.js'

  // 接口
  import {
    getList,
    add,
    put,
    del,
    excel

  } from '@/api/finance-group/finance-list'
  import {
    tableOption
  } from '../../../data/finance-group/finance-list.js'
  import Tables from '_c/tables'

  export default {
    name: 'tables_page',
    components: {
      Tables
    },
    created() {
      let _this =this
      this.$nextTick(function() {
        // 权限校验
        _this.role_add = permission(this.roles, 'sportsCard/add')
        _this.role_edit = permission(this.roles, 'sportsCard/edit')
        _this.role_del = permission(this.roles, 'sportsCard/delete')

      })
      this.getList()
    },
    watch: {

    },
    mounted() {

    },
    computed: {
      ...mapState({

        roles: state => state.user.roles

      }),
    },
    data() {
      return {
        // 权限标识
        role_add: false,
        role_edit: false,
        role_del: false,
        // 上传
        tableOption: tableOption,
        delId: '',
        data: {
          list: [],
          stores:[]
        },
        createTitle: ' ',
        isAdd: true, // 新增true,修改false
        isDisable: false, // 新增时提交按钮点击状态
        isLoading: false, // 新增时提交按钮loading状态

        loadingText: '',

        // 查询参数
        searchObj: {
          name: ''

        },
        // 分页
        page: {
          pageSize: 8,
          current: 1,
          total: 0
        },

        // 分页end
        // 弹窗状态
        createModal: false, // 新增，修改弹窗
        delModal: false, // 删除弹窗

        formValidate: {
          name: '',
          is_open: '1',
          count: 0,
          amount: 0,
          price: 0,
          give_amount1:'',
          store_id:0
        },

        ruleValidate: {
          name: [{
            required: true,
            message: '请输入运动卡名称',
            trigger: 'blur'
          }],
          // price: [{
          //   required: true,
          //   message: '请输入面额',
          //   trigger: 'blur'
          // }],
          amount: [{
            required: true,
            message: '请输入实际售价',
            trigger: 'blur'
          }],
          give_amount1: [{
            required: true,
            message: '请输入会员赠送金额',
            trigger: 'blur'
          }]
        }
      }
    },
    methods: {
      // 列表数据
      getList() {
        let _this = this
        let params = {
          page: this.page.current,
          size: this.page.size,
          name: this.searchObj.name,
          search_time: this.searchObj.search_time
        }

        getList(params).then(res => {
          if (res.data.status == 1) {
            let result = res.data.data
            _this.data.list = result.list
            _this.page.total = result.total
            _this.page.pageSize = result.size
            _this.data.stores = result.stores
            _this.searchObj.search_time  =result.search_time
          } else {
            let config = {
              content: res.data.message,
              background: true
            }
            _this.$Message.error(config)
          }
        }).catch(function(error) {
          // 异常
          console.log(error)
        })
      },

      detail(row) {
        this.detailModal = true;
        this.formValidate = JSON.parse(JSON.stringify(row))

        this.getMakeData();
      },

      changepage(e) {
        this.page.current = e
        this.getList()
      },


      // 新增
      create() {
        if (!this.role_add) {
          let config = {
            content: '您没有操作权限',
            background: true
          }
          this.$Message.error(config)
          return
        }
        this.createModal = true

        this.createTitle = '添加运动卡'
        this.isAdd = true
        this.formValidate = {} // 表单重置
        this.formValidate.is_open = '1';

        this.handleReset('formValidate') // 验证重置
      },
      // 修改
      edit(row) {
        if (!this.role_edit) {
          let config = {
            content: '您没有操作权限',
            background: true
          }
          this.$Message.error(config)
          return
        }
        this.createModal = true
        this.createTitle = '编辑运动卡'
        this.isAdd = false
        this.formValidate = {} // 表单重置
        this.formValidate = JSON.parse(JSON.stringify(row))
        // console.log(row)
        this.formValidate.is_open = this.formValidate.is_open.toString();

        this.formValidate.give_amount1 = row.give_amount;


        this.handleReset('formValidate') // 验证重置
      },

      // 删除
      del(row) {
        if (!this.role_del) {
          let config = {
            content: '您没有操作权限',
            background: true
          }
          this.$Message.error(config)
          return
        }
        this.delId = row.id
        this.delModal = true
        // 删除接口
      },
      confirmDel() {
        let _this = this
        let obj = {
          id: this.delId
        }
        del(obj).then(res => {
          if (res.data.status == 1) {

            _this.delModal = false
            _this.$Message.success('操作成功')
            _this.getList() // 重新刷新数据
          } else {
            _this.delModal = false

          }
        }).catch(function(error) {
          // 异常
          _this.delModal = false
          console.log(error)
        })
      },
      // 刷新
      refresh() {
        this.searchObj = {} // 清空搜索框
        this.getList()
      },
      // 重置
      reset() {
        this.searchObj = {} // 清空搜索框
        this.getList()
      },
      // 查询
      search() {
        this.getList()
      },
      seachTimeChange(e){
        this.searchObj.search_time =e
      },
      excel(){
       let _this = this
        let obj = {
          pay_time: this.searchObj.pay_time,
          name:this.searchObj.name
        }
        excel(obj).then(res => {
          if (res.data.status == 1) {

             let result = res.data.data.url

            window.location.href = result
            // _this.getList() // 重新刷新数据
          } else {
            _this.delModal = false

          }
        }).catch(function(error) {
          // 异常
          _this.delModal = false
          console.log(error)
        })
        },

      save(name) {

        let _this = this

        this.$refs[name].validate((valid) => {

          if (valid) {

            if (_this.isAdd) {
              // console.log(33)
              // 新增
              let obj = {
                name: _this.formValidate.name,
                price: _this.formValidate.price,
                amount: _this.formValidate.amount,
                is_open: _this.formValidate.is_open,
                give_amount1:_this.formValidate.give_amount1,
                store_id: _this.formValidate.store_id

              }

              // 新增接口
              add(obj).then(res => {
                if (res.data.status == 1) {

                  _this.createModal = false
                  _this.getList() // 重新刷新数据
                  _this.$Message.success('操作成功')
                } else {
                  _this.createModal = false
                  // axios响应拦截
                }
              }).catch(function(error) {
                // 异常
                _this.createModal = false
                console.log(error)
              })
            } else {
              // 修改

              let obj = {
                id: _this.formValidate.id,
                is_open: _this.formValidate.is_open
              }

              // 修改接口
              put(obj).then(res => {
                if (res.data.status == 1) {

                  _this.createModal = false
                  _this.getList() // 重新刷新数据
                  _this.$Message.success('操作成功')
                } else {

                }
              }).catch(function(error) {
                // 异常
                console.log(error)
              })
            }

          } else {
            this.$Message.error('请输入必填项!')
          }
        })
      },
      handleReset(name) {
        this.$refs[name].resetFields()
      },

    }

  }
</script>

<style lang="scss">
  @import "./index";
</style>
